// JavaScript Document
/**
 * running man
 * @author rubekid
 */
(function(){
	
	/**
	 * 获取元素样式
	 * @param Element el
	 */
	function getStyle(el){
		if(window.getComputedStyle){
			return window.getComputedStyle(el,null); 
		}
		return el.currentStyle;
	}
	/**
	 * 获取元素指定样式值
	 * @param Element el
	 * @param String name
	 */
	function getStyleValue(el, name){
		var style = getStyle(el);
		return style[name].replace(/px/i, '');
	}
	
	function RunningMan(options){
		this.init(options);
	}
	
	RunningMan.prototype = {
		DEFAULT_PLAYER_SIZE : 200,
		init:function(options){
			var wrapper = document.getElementById(options.wrapperId);
			this.lineHeight = options.lineHeight||this.DEFAULT_PLAYER_SIZE ;
			this.width = options.width || getStyleValue(wrapper, "width");
			this.height = options.players.length * this.lineHeight;
			var canvas = document.createElement("canvas");
			canvas.width = this.width;
			canvas.height = this.height;
			wrapper.appendChild(canvas);
			this.context = canvas.getContext("2d");
			this.players = options.players;
			this.imageReadyCount = 0;
			this.frameIndex = 0;
			this.frameCount = options.playerImages.length ;
			this.playerWidth = options.playerWidth|| this.DEFAULT_PLAYER_SIZE;
			this.playerHeight = options.playerHeight||this.DEFAULT_PLAYER_SIZE;
			this.initPlayerImages(options.playerImages);
			
		},
		initPlayerImages:function(playerImages){
			var _this = this;
			this.playerImages = [];
			for(var i in playerImages){
				var image = new Image();
				image.onload = function(){
					_this.playerImages.push(this);
					_this.imageReady();
				};
				image.src = playerImages[i];
			}
		},
		imageReady:function(){
			this.imageReadyCount ++;
			if(this.imageReadyCount == this.frameCount){
				this.afterImageReady();
			}
		},
		afterImageReady:function(){
			var width = this.playerWidth;
			var height = this.playerHeight;
			var canvas = document.createElement("canvas");
			canvas.width = width;
			canvas.height = height;
			var context = canvas.getContext("2d");
			this.playerImageData = {};
			var images = this.playerImages;
			var max1 = 0.5, max2=0.5, max3=0.5;
			var scale = 1;
			for(var i=0; i<this.players.length; i++){
				var player = this.players[i];
				this.playerImageData[player.id] = [];
				var rscale = Math.random() * max1;
				var gscale = Math.random() * max2;
				var bscale = Math.random() * max3;
				for(var k in images){
					context.clearRect(0, 0, width, height);
					context.drawImage(images[k], 0, 0, width, height);
					var imageData = context.getImageData(0, 0, width, height)
					this.translateColor(imageData, rscale, gscale, bscale);
				 	this.playerImageData[player.id].push( imageData );
				}
			}
			this.afterInit();
		},
		setPlayers:function(players){
			this.players = players;
		},
		run:function(){
			var _this = this;
			this.timeout = setInterval(function(){
				_this.drawPlayer();
			}, 100);
		},
		afterInit:function(){
			this.run();
		},
		drawPlayer:function(){
			this.context.clearRect(0, 0, this.width, this.height);
			for(var i in this.players){
				var player = this.players[i];
				this.context.putImageData(this.playerImageData[player.id][this.frameIndex], (player.count) % 960,  i * this.lineHeight);
			}
			
			this.frameIndex = (this.frameIndex + 1) % this.playerImages.length;
		},
		/**
		 * 转换颜色
		 */
		translateColor:function(pixels, rscale, gscale, bscale){
			var d = pixels.data;
			for (var i = 0; i < d.length; i += 4) {
				var r = d[i];
				var g = d[i + 1];
				var b = d[i + 2];
				d[i]     = (r * 3.0)+(g * gscale)+(b * bscale); // red
				d[i + 1] = (r * rscale)+(g * 1.0)+(b * bscale); // green
				d[i + 2] = (r * rscale)+(g * gscale)+(b * 1.0); // blue

			}
		}
	};
	
	window.RunningMan = RunningMan;
})();